<template>
  <form-dialog
    :title="$t('workspace.workspaceDetails')"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form label-position="right" label-width="122px">
        <el-form-item :label="$t('workspace.workspaceUuid')">
          {{ workareasDetailData.uuid }}
        </el-form-item>
        <el-form-item :label="$t('workspace.cloudPlatformId')">
          {{ workareasDetailData.platform_uuid }}
        </el-form-item>
        <el-form-item :label="$t('workspace.projectId')">
          {{ workareasDetailData.project_uuid }}
        </el-form-item>
        <el-form-item :label="$t('workspace.desktopType')">
          <template>
            <span>{{ $t(`workspace.category_code.${workareasDetailData.category_code}`) }}</span>
          </template>
        </el-form-item>
        <el-form-item :label="$t('workspace.desktopProtocol')">
          {{ workareasDetailData.desktop_protocol }}
        </el-form-item>
        <el-form-item :label="$t('workspace.combinationSpecification')">
          {{ $t(`workspace.composite_specification.${workareasDetailData.composite_specification}`) }}
        </el-form-item>
        <el-form-item :label="$t('workspace.insertType')">
          <template>
            <span v-if="workareasDetailData.access_network">{{ $t(`workspace.access_network.${workareasDetailData.access_network}`) }}</span>
          </template>
        </el-form-item>
        <el-form-item :label="$t('workspace.accessGateway')">
          {{ workareasDetailData.connection_info }}
          <!-- <template v-if="workareasDetailData.connection_info">
            <span v-for="(item,index) in workareasDetailData.connection_info.internet_UAG"
              :key="index"
            >
            {{ item }}
            </span>
          </template> -->
        </el-form-item>
        <el-form-item :label="$t('workspace.desktopQuota')" v-if="workareasDetailData.composite_specification === '0'">
          {{ workareasDetailData.desktop_quota }}
        </el-form-item>
        <el-form-item :label="$t('workspace.updatedAt')">
          <template>
            <span>{{ myParseTime(new Date(workareasDetailData.updated_at)) }}</span>
          </template>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button type="primary" @click.native="handleClose">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import FormDialog from '../../../components/Dialog/formDialog.vue';
import { parseTime } from '../../../utils';
export default Vue.extend({
  components: {
    FormDialog
  },
  data() {
    return {
      visible: false,
      loading: false,
      workareasDetailData: {
        uuid: '',
        platform_uuid: '',
        project_uuid: '',
        category_code: '',
        desktop_protocol: '',
        composite_specification: '',
        access_network: '',
        connection_info: '',
        desktop_quota: '',
        updated_at: '',
        project_type: ''
      },
    }
  },
  methods: {
    handleClose() {
      this.loading = false;
      this.visible = false;
    },
    init(formData: any) {
      this.workareasDetailData.uuid = formData.uuid
      this.workareasDetailData.platform_uuid = formData.platform_uuid
      this.workareasDetailData.project_uuid = formData.project_uuid
      this.workareasDetailData.category_code = formData.category_code
      this.workareasDetailData.desktop_protocol = formData.desktop_protocol
      this.workareasDetailData.composite_specification = formData.composite_specification
      this.workareasDetailData.access_network = formData.access_network
      this.workareasDetailData.connection_info = formData.connection_info
      this.workareasDetailData.desktop_quota = formData.desktop_quota
      this.workareasDetailData.updated_at = formData.updated_at,
      this.workareasDetailData.project_type = formData.project_type
      this.visible = true
    },
    myParseTime(t: any) {
      return parseTime(t);
    },
  }
})
</script>
<style lang="scss" scoped>

</style>
